<template>
  <view class="repair-task">
    <!-- 顶部筛选 -->
    <view class="filter-header">
      <text class="count">共{{ total }}条</text>
      <view class="filter-group">
        <!-- 状态筛选 -->
        <picker 
          @change="onStatusChange" 
          :value="statusIndex" 
          :range="statusList"
          range-key="text"
        >
          <view class="filter-item">
            <text>状态：{{ statusList[statusIndex].text }}</text>
            <text class="arrow">∨</text>
          </view>
        </picker>
        
        <!-- 维修方式筛选 -->
        <picker 
          @change="onTypeChange" 
          :value="typeIndex" 
          :range="typeList"
          range-key="text"
        >
          <view class="filter-item">
            <text>维修方式：{{ typeList[typeIndex].text }}</text>
            <text class="arrow">∨</text>
          </view>
        </picker>
        
        <!-- 日期选择 -->
        <picker 
          mode="date" 
          :value="selectedDate"
          @change="onDateChange"
        >
          <image class="calendar" src="/static/img/日历-copy.png" mode="aspectFit"/>
		  <text>日期</text>
        </picker>
      </view>
    </view>

    <!-- 维修列表 -->
    <view class="repair-list">
      <view class="repair-item" v-for="(item, index) in filteredList" :key="index">
        <view class="info-line">
          <text class="label">维修单号：</text>
          <text class="value">{{ item.orderNo }}</text>
          <text :class="['status', item.statusType]">{{ item.status }}</text>
        </view>
        <view class="info-line">
          <text class="label">维修方式：</text>
          <text class="value">{{ item.repairType }}</text>
        </view>
        <view class="info-line">
          <text class="label">预约日期：</text>
          <text class="value">{{ item.appointTime }}</text>
		  <navigator url="/pages/repair/repdetail/repdetail">
			 <button class="detail-btn" @tap="viewDetail(item)">查看详情</button> 
		  </navigator>
        </view>
      </view>
    </view>

    <!-- 分页器 -->
    <view class="pagination">
      <view class="page-btn" @tap="prevPage">
        <text class="iconfont">←</text>
      </view>
      <view class="page-info">{{ currentPage }}/{{ totalPages }}</view>
      <view class="page-btn" @tap="nextPage">
        <text class="iconfont">→</text>
      </view>
      <view class="refresh-btn" @tap="refreshList">
        <text class="iconfont">↻</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      total: 3,
      currentPage: 1,
      totalPages: 1,
      statusIndex: 0,
      typeIndex: 0,
      selectedDate: '',
      
      // 状态选项
      statusList: [
        { value: 'all', text: '全部' },
        { value: 'processing', text: '进行中' },
        { value: 'completed', text: '已完成' }
      ],
      
      // 维修方式选项
      typeList: [
        { value: 'all', text: '全部' },
        { value: 'store', text: '到店维修' },
        { value: 'pickup', text: '上门取车' }
      ],
      
      // 列表数据
      repairList: [
        {
          orderNo: '3535252',
          repairType: '到店维修',
          appointTime: '2022/11/10 11:00',
          status: '进行中',
          statusType: 'processing',
          type: 'store'
        },
        {
          orderNo: '3535252',
          repairType: '上门取车',
          appointTime: '2022/11/10 11:00',
          status: '已完成',
          statusType: 'completed',
          type: 'pickup'
        },
        {
          orderNo: '3535252',
          repairType: '上门取车',
          appointTime: '2022/11/10 11:00',
          status: '进行中',
          statusType: 'processing',
          type: 'pickup'
        }
      ]
    }
  },
  computed: {
    // 根据筛选条件过滤列表
    filteredList() {
      return this.repairList.filter(item => {
        // 状态筛选
        const statusMatch = this.statusList[this.statusIndex].value === 'all' || 
          item.statusType === this.statusList[this.statusIndex].value
        
        // 类型筛选
        const typeMatch = this.typeList[this.typeIndex].value === 'all' || 
          item.type === this.typeList[this.typeIndex].value
        
        // 日期筛选
        const dateMatch = !this.selectedDate || 
          item.appointTime.includes(this.selectedDate)
        
        return statusMatch && typeMatch && dateMatch
      })
    }
  },
  methods: {
    // 状态变更
    onStatusChange(e) {
      this.statusIndex = e.detail.value
      this.refreshList()
    },
    
    // 维修方式变更
    onTypeChange(e) {
      this.typeIndex = e.detail.value
      this.refreshList()
    },
    
    // 日期变更
    onDateChange(e) {
      this.selectedDate = e.detail.value
      this.refreshList()
    },
    
    // 查看详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/repairDetail/repairDetail?id=${item.orderNo}`
      })
    },
    
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.fetchList()
      }
    },
    
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.fetchList()
      }
    },
    
    // 刷新列表
    refreshList() {
      this.currentPage = 1
      this.fetchList()
    },
    
    // 获取列表数据
    fetchList() {
      // 这里调用接口获取数据
      // const params = {
      //   page: this.currentPage,
      //   status: this.statusList[this.statusIndex].value,
      //   type: this.typeList[this.typeIndex].value,
      //   date: this.selectedDate
      // }
      // 调用API
    }
  }
}
</script>

<style lang="scss">
.repair-task {
  min-height: 100vh;
  background: #F5F5F5;
  padding: 20rpx;

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    
    .count {
      font-size: 28rpx;
      color: #333;
    }

    .filter-group {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .filter-item {
        font-size: 28rpx;
        color: #333;
        
        .arrow {
          margin-left: 4rpx;
          color: #999;
        }
      }

      .calendar {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .repair-list {
    .repair-item {
      background: #FFFFFF;
      padding: 24rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;

      .info-line {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 140rpx;
          font-size: 28rpx;
          color: #666;
        }

        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333;
        }
		.status {
		          font-size: 26rpx;
		          
		          &.processing {
		            color: #007AFF;
		          }
		          
		          &.completed {
		            color: #67C23A;
		          }
		        }
		
		        .detail-btn {
		          background: #007AFF;
		          color: #FFFFFF;
		          font-size: 26rpx;
		          padding: 8rpx 24rpx;
		          border-radius: 6rpx;
		        }
		      }
		    }
		  }
		
		  .pagination {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    padding: 30rpx 0;
		    
		    .page-btn {
		      width: 60rpx;
		      height: 60rpx;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		      background: #FFFFFF;
		      border-radius: 8rpx;
		      margin: 0 20rpx;
		    }
		
		    .page-info {
		      font-size: 28rpx;
		      color: #333;
		    }
		
		    .refresh-btn {
		      width: 60rpx;
		      height: 60rpx;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		      background: #FFFFFF;
		      border-radius: 8rpx;
		      margin-left: 20rpx;
		    }
		  }
		}
</style>